﻿$(document).ready(function () {
    //load()
    $('#letter-a a').click(function (event) {
        event.preventDefault();
        $('#dictionary').hide().load('res/a.html', function () {
            $(this).fadeIn('slow');
        });
        //alert('Loaded!');
    });

    //$.getJSON
    $('#letter-b a').click(function (event) {
        event.preventDefault();
        $.getJSON('res/b.json', function (data) {
            var html = '';
            $.each(data, function (entryIndex, entry) {
                html += ['<div class="entry">', '<h3 class="term">', entry.term, '</h3>', '<div class="part">', entry.part, '</div>', '<div class="definition">', entry.definition].join('');
                if (entry.quote) {
                    html += '<div class="quote">';
                    $.each(entry.quote, function (lineIndex, line) {
                        html += '<div class="quote-line">' + line + '</div>';
                    });
                }
                if (entry.author) {
                    html += '<div class="quote-author">' + entry.author + '</div>';
                }
                html += '</div></div>';
            });

            $('#dictionary').html(html);
        });
    });

    //$.getScript()
    $('#letter-c a').click(function (event) {
        event.preventDefault();
        $.getScript('res/c.js');
    });

    //$.get() XML
    $('#letter-d a').click(function (event) {
        event.preventDefault();
        $.get('res/d.xml', function (data) {
            $('#dictionary').empty();
            var html = '';
            $(data).find('entry:has(quote[author])').each(function () {
                var $entry = $(this);
                html += ['<div class="entry"><h3 class="term">'
                    , $entry.attr('term'), '</h3><div class="part">'
                    , $entry.attr('part'), '</div><div class="definition">'
                    , $entry.find('definition').text()].join('');
                var $quote = $entry.find('quote');
                if ($quote.length) {
                    html += '<div class="quote">';
                    $quote.find('line').each(function () {
                        html += '<div class="quote-line">';
                        html += $(this).text() + '</div>';
                    });
                    if ($quote.attr('author')) {
                        html += '<div class="quote-author">';
                        html += $quote.attr('author') + '</div>';
                    }
                    html += '</div>';
                }
                html += '</div></div>';
            });
            $('#dictionary').append($(html));
        });
    });

    $('#letter-e a').click(function (event) {
        event.preventDefault();
        var requestData = { term: $(this).text() };
        $.get('res/e.ashx', requestData, function (data) {
            $('#dictionary').html(data);

            /*$.post('res/e.ashx', requestData, function (data) {
            $('#dictionary').html(data);*/

            //$('#dictionary').load('res/e.ashx', requestData);
        }).fail(function (jqXHR) {
            $('#dictionary').html('An error has occurred:' + jqXHR.status).append(jqXHR.responseText);
        });
    });

    $('#letter-f form').submit(function (event) {
        event.preventDefault();
        var $values = $(this).serialize();
        //{ 'term': $('input[name="term"]').val() }
        $.get('res/e.ashx', $values, function (data) {
            $('#dictionary').html(data);
        });
    });

    var $loading = $('<div id="loading">Loading...</div>').insertBefore('#dictionary');
    $(document).ajaxStart(function () {
        $loading.show();
    }).ajaxStop(function () {
        $loading.hide();
    });

    $('body').on('click', 'h3.term', function () {
        $(this).siblings('.definition').slideToggle();
    });

    /* 使用$.ajaxSetUp()函数可以修改调用Ajax方法时每个选项的默认值
    $.ajaxSetUp({
    url: 'res/a.html',
    type: 'POST',
    dataType: 'html'
    });

    $.ajax({
    type: 'GET',
    success: function (data) {
    $('#dictionary').html(data);
    }
    });*/

    $('#letter-h a').click(function (event) {
        event.preventDefault();
        $('#dictionary').load('res/h.html .entry');
    });

    //课后题
    //1. 页面加载后，把exercises-content.html的主体（body）内容提取到页面的内容区域。 
    $('#dictionary').load('res/exercises-content.html .letter');
    //2. 不要一次就显示整个文档，请为左侧的字母列表创建“提示条”，当用户鼠标放到字母上时，从exercises-content.html中加载与该字母有关的内容。
    $('div.letters a').mouseover(function () {
        var letter = $(this).text().toLowerCase();
        $.ajax({
            url: 'res/exercises-content.html',
            dataType: 'html',
            success: function (data, textStatus, jqXHR) {
                alert($(data));
                //alert($(data).find('#letter-' + letter).text());
                //$(this).attr('title', $(data).find('#letter-' + letter).text());
            },            
//            complete: function(jqXhr, textStatus) {
//                //data = eval(data);
//                //alert(data.find('#letter-' + letter).text());
//                $(this).attr('title', $(data).find('#letter-' + letter).text());
//            },
            error: function(jqXhr, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

    });
    //[************]3. 为页面加载添加错误处理功能，在页面的内容区显示错误消息。修改脚本，请求does-not-exist.html而不是exercises-content.html，以测试错误处理功能。
    //    $('#dictionary').load('res/does-not-exist.html .letter').fail(function (jqXHR) {
    //        $('#dictionary').html('An error has occurred:' + jqXHR.status).append(jqXHR.responseText);
    //    });
    //4. 挑战：页面加载后，向GitHub发送一个JSONP请求，取得某个用户代码库的列表。把每个代码库的名称和URL插入到页面的内容区。取得jQuery项目代码库的URL是https://api.github.com/users/jquery/repos。

});